<template>
  <div class="custom-box">
    <span class="setting">
      <i
        class="el-icon-s-tools"
        @click="handleOpen"
      />
    </span>
    <el-dialog
      title="表头展示字段"
      width="650px"
      :visible.sync="visible"
    >
      <el-transfer
        v-model="value"
        :props="{
          key:'key',
          label:'name'
        }"
        class="setheader"
        :data="fields"
        :titles="['不展示', '已展示']"
      />
      <span
        slot="footer"
        class="dialog-footer"
        align="center"
      >
        <el-button
          size="small"
          @click="handldeCancel"
        >取 消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="handleSubmit"
        >保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
/**
 * @vue
 * @props
 * @prop {Array} fields
 */
export default {
  props: {
    fields: {
      type: Array
    }
  },
  data() {
    return {
      visible: false,
      value: []
    }
  },
  watch: {
    fields: {
      immediate: true,
      handler() {
        this.initValue()
      }
    }
  },
  methods: {
    initValue() {
      this.value = this.fields.reduce((prev, field, index) => {
        if (field.show || field.show == undefined) {
          prev.push(field.key)
        }
        return prev
      }, [])
    },
    handleSubmit() {
      this.$emit('field-change', this.value)
      this.visible = false
    },
    handldeCancel() {
      this.visible = false
    },
    handleOpen() {
      this.visible = true
      this.value = []
      this.initValue()
    }
  }
}
</script>

<style scoped>
.el-icon-s-tools {
  cursor: pointer;
}
.el-icon-s-tools:hover {
  color: #1890ff;
}
.custom-box {
  display: inline-block;
  text-align: left;
}
.setheader .el-checkbox {
  display: block;
}
</style>

